<!DOCTYPE html>
<html lang="en">
<<<<<<< HEAD
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #tab{
            width: 400px;
            height: 400px;
            border-collapse: collapse;
        }
        body{
            margin-bottom: 400px;
        }
    </style>  
</head>
<body>
    <h1 id="top">一级标题</h1>
    <h2>二级标题</h2>



    <!-- 解释说明-->
    <!-- 段落-->
    <p> 第一段内容</p>
    <p> 第二段内容</p>
    <p> 第二段内容</p>
    <p> 第二段内容</p>

    <!--格式化标签  加粗 bold 倾斜 italic  下划线（插入线 insert） underline  删除线 delete 上下标 subscript/supscript-->

    <b>加粗</b>
    <strong>也是加粗</strong>

    <i>倾斜</i>
    <em>也是倾斜</em>

    <ins>下划线/插入</ins>
    <del>删除线</del>

    o<sub>2</sub>
    mm<sup>2</sup>


    <!-- a标签超链接 attribute href 加上规定跳转的页面网址 目标target  myself -->
    <!-- 跳转到新的一个超链接页面 a href超链接 target_blank-->
    <a href="https://baidu.com" target="_self">跳转到百度</a>
    <a href="https://baidu.com" target="_blank">跳转到百度</a>
    

    <!-- 置顶跳转 ID identification 设置好跳转到的ID -->
    <a href="#top">置顶</a>

    <!--image src图片源路径 alt(alternative)当图片路径错误时 的提示信息  -->
    <!--同级目录下 相对路径引入绝对路径 ./-->
    <img src="./images/image.png"alt="图片路径错误" width="200"
    
    <!--表格N行n列-->
    <table border="1" id="tab">
        <tr>
            <td>111</td>
            <td>222</td>
            <td>3333</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>3333</td>
        </tr>
    </table>

<!--块级标签 div 可以换行/ 行内标签 span 不会换行 CSS可以互相转换-->
<div> 通用块级标签 换行</div> 
<div> 通用块级标签  可以换行</div> 
<div> 通用块级标签  一般换行</div> 
<span>通用行内标签 不会换行</span>
<span>通用行内标签 不会换行</span>
<span>通用行内标签 不会换行</span>


<hr>
<form action="">
    用户名：<input type="text" placeholder="请输入用户名"><br>
=======

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #tab {
      width: 400px;
      height: 400px;
      /* 解决双边框问题 重叠合并 */
      border-collapse: collapse;
    }

    body {
      margin-bottom: 400px;
    }
  </style>
</head>

<body>
  <!-- 解释说明：告诉别人这段什么意思？ -->
  <!-- asdasdadasdads -->

  <!-- headline大标题 China Daily 中国日报 HEADLINE title -->
  <h1 id="top">一级标题</h1>
  <h2>asdads</h2>

  <!-- 段落 paragraph -->
  <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容</p>
  <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容</p>
  <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容</p>

  <!-- 格式化标签 加粗bold 倾斜italic 下划线（插入线insert）underline 删除线（穿透线）delete 上下标subscript/supscript -->
  <!-- 自带的 -->
  <b>加粗</b>
  <strong>加粗</strong>

  <i>倾斜</i>
  <em>倾斜</em>

  <ins>下划线/插入线</ins>
  <del>删除线/穿透线</del>

  O<sub>2</sub>
  m<sup>2</sup>

  <!-- a标签超链接 属性 attributes href规定跳转页面的网址 目标 myself yourself 模块的跳转 -->
  <!-- ID identification 游戏ID 与身俱来的 出身自带的 -->
  <a href="https://www.baidu.com" target="_self">跳转到百度</a>
  <a href="#top">置顶</a>

  <!-- image src图片源路径 alt alternate 当图片路径错误时的提示信息 -->
  <!-- 相对路径引入 绝对路径C:/Users/xxx/xxx/xxx/xxx/xxx.png -->
  <!-- 同级目录 上一级目录 上上级目录 -->
  <img src="./images/image.png" alt="图片路径错误" width="300" title="标题">

  <!-- n行n列 -->
  <table border="1" id="tab">
    <tr>
      <td>111</td>
      <td>222</td>
      <td>333</td>
      <td>444</td>
    </tr>
    <tr>
      <td>111</td>
      <td>222</td>
      <td>333</td>
      <td>444</td>
    </tr>
    <tr>
      <td>111</td>
      <td>222</td>
      <td>333</td>
      <td>444</td>
    </tr>
    <tr>
      <td>111</td>
      <td>222</td>
      <td>333</td>
      <td>444</td>
    </tr>
  </table>

  <!-- list列表 有序（1. 2. 3. a.b.c.(1)(2)） 无序·对号 ♦️ ⭕️ order unorder -->
  <!-- disc圆盘圆圈 decimal十进制的 binary二进制 -->
  <ul>
    <li>第一项</li>
    <li>第一项</li>
    <li>第一项</li>
  </ul>
  <ol>
    <li>第一项</li>
    <li>第一项</li>
    <li>第一项</li>
  </ol>

  <!-- 
    块级标签：可以换行的，h/p/table/tr/td/ul/ol/li...
    行内标签：不会换行的，img/b/strong/em/i/sub/sup/a...

    通用的块级或者行内标签：div/span
   -->
  <div>通用的块级标签</div>
  <div>通用的块级标签</div>
  <div>通用的块级标签</div>
  <span>通用的行内标签</span>
  <span>通用的行内标签</span>
  <span>通用的行内标签</span>
  <!-- CSS 可以相互转化的 矛盾同一性、斗争性，在一定条件下可以相互转化 通常来讲 -->

  <!-- horizontal水平的 vertical垂直的 -->
  <hr>
  <!-- form表单 action数据提交的后端ip地址 -->
  <form action="">
    <!-- 行内 -->
    用户名：<input type="text" placeholder="请输入用户名"><br><!-- break 打断打破破坏-->
>>>>>>> 959b6e250bd856b13de53265656f9d765b6b3492
    密码：<input type="password" placeholder="请输入密码"><br>
    性别：
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female">女
    <br>
<<<<<<< HEAD

    兴趣爱好：
    <input type="checkbox" name ="hobby" value="badminton">羽毛球
    <input type="checkbox" name ="hobby" value="soccer">足球
    <input type="checkbox" name ="hobby" value="tennis">网球
    <br>

    <select name="city">
        <option value="beijing">北京</option>
        <option value="hangzhou">杭州</option>
        <option value="chengdu">成都</option>
        <option value="shanghai">上海</option>
        <option value="suzhou">苏州</option>
    </select>
 
</form>
</body>


=======
    兴趣爱好：
    <input type="checkbox" name="hobby" value="badminton">羽毛球
    <input type="checkbox" name="hobby" value="tennis">网球
    <input type="checkbox" name="hobby" value="football">足球
    <br>
    <!-- ed过去完成式 已经被选中了 -->
    <select name="city">
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="guangzhou">广州</option>
      <option value="shenzhen">深圳</option>
      <option value="wuhan">武汉</option>
      <option value="chongqing">重庆</option>
    </select>
    <br>
    <!-- repeat -->
    <textarea name="profile" cols="30" rows="10" placeholder="请输入个人介绍"></textarea><br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
  </form>

  <!-- 
    查询字符串：?开头 &连接多个字段的长串
    ?gender=male&hobby=tennis&hobby=football&city=guangzhou&profile=asdasdasd
   -->
</body>

>>>>>>> 959b6e250bd856b13de53265656f9d765b6b3492
</html>